# Tailwind CSS v4

[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on utility classes, which can quickly add common styles to components and supports flexible extension of theme styles.

You can integrate Tailwind CSS in Rsbuild via PostCSS plugins.

## Choosing Tailwind CSS version

This document introduces the integration of Tailwind CSS v4.

Please note that Tailwind CSS v4 uses many modern CSS features, such as [Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), if your target browser does not support these features, please use Tailwind CSS v3 first, see [Using Tailwind CSS v3](/guide/styling/tailwindcss-v3) for more details.

More information can be found in [Tailwind CSS - Compatibility](https://tailwindcss.com/docs/compatibility).

## Installing Tailwind CSS

Rsbuild has built-in support for PostCSS, you can install `tailwindcss` and `@tailwindcss/postcss` packages to integrate Tailwind CSS:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add tailwindcss @tailwindcss/postcss -D" />

## Configuring PostCSS

You can register the Tailwind CSS PostCSS plugin through [postcss.config.cjs](https://npmjs.com/package/postcss-loader#config) or [tools.postcss](/config/tools/postcss).

```js title="postcss.config.mjs"
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
```

## Importing CSS

Add an `@import` to your CSS entry file that imports Tailwind CSS.

```css title="src/index.css"
@import 'tailwindcss';
```

:::tip
Tailwind CSS v4 cannot be used with CSS preprocessors like Sass, Less, or Stylus. You need to place the `@tailwind` directive at the beginning of your `.css` file, see [Tailwind CSS - Compatibility](https://tailwindcss.com/docs/compatibility#sass-less-and-stylus) for more details.
:::

## Done

You have now completed all the steps to integrate Tailwind CSS in Rsbuild!

You can use Tailwind's utility classes in any component or HTML, such as:

```html
<h1 class="text-3xl font-bold underline">Hello world!</h1>
```

For more usage details, refer to the [Tailwind CSS documentation](https://tailwindcss.com/).

## VS Code extension

Tailwind CSS provides a [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) plugin for VS Code to automatically complete Tailwind CSS class names, CSS functions, and directives.

You can install this plugin in VS Code to enable the autocompletion feature.
